<template>
  <div>
    <Row :gutter="20">
      <Col span="8">
        <Card :bordered="false">
          <p slot="title">新增用户</p>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="用户名" prop="username">
              <Input v-model="formValidate.username" placeholder="Enter your repositories username"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input type="password" v-model="formValidate.password" placeholder="Enter your password"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="passwordAgen">
              <Input type="password" v-model="formValidate.passwordAgen" placeholder="Agen Enter your password"></Input>
            </FormItem>
            <FormItem label="姓名" prop="name">
              <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
            </FormItem>
            <FormItem label="部门" prop="department">
              <Input v-model="formValidate.department" placeholder="Enter your department"></Input>
            </FormItem>
            <FormItem label="角色" prop="role">
              <Select v-model="formValidate.role" placeholder="Select your work role">
                <Option value="adminstrator">管理员</Option>
                <Option value="general">使用者</Option>
              </Select>
            </FormItem>
            <FormItem label="权限组" prop="auth_group">
              <Select v-model="formValidate.auth_group" multiple>
                <Option v-for="item in auth_groups" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="电话" prop="mobile">
              <Input v-model="formValidate.mobile" placeholder="Enter your phone number"></Input>
            </FormItem>
            <FormItem>
              <Button type="info" @click="userRegistry('formValidate')" style="margin-left: 12px">注册</Button>
              <Button type="warning" @click="handleReset('formValidate')" style="margin-left: 12px">取消</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
      <Col span="16">
        <Card :bordered="false">
          <p slot="title">用户列表</p>
          <div style="padding-bottom: 20px;">
            <Table border :columns="columns" :data="data">
              <template slot-scope="{ row, index }" slot="action">
                <Button type="warning" size="small" style="margin-right: 5px" @click="updateUserPass_id(index)">修改密码</Button>
                <Button type="warning" size="small" style="margin-right: 5px" @click="updateAuthGroup_id(index)">修改权限</Button>
                <Button type="error" size="small" @click="remove(index)">删除</Button>
              </template>
            </Table>
          </div>
          <div style="padding-bottom: 10px;">
            <Page :total="count" size="small" current.sync="current" @on-change="UserSwitchPage" />
          </div>
          <Modal v-model="updateUserPassModal" draggable scrollable title="修改密码" :footer-hide=true>
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="72">
              <FormItem label="用户名" prop="username">
                <Input disabled v-model="formValidate2.username" placeholder="Enter your repositories username"></Input>
              </FormItem>
              <FormItem label="密码" prop="password">
                <Input type="password" v-model="formValidate2.password" placeholder="Enter your password"></Input>
              </FormItem>
              <FormItem label="确认密码" prop="passwordAgen">
                <Input type="password" v-model="formValidate2.passwordAgen" placeholder="Agen Enter your password"></Input>
              </FormItem>
              <FormItem>
                <Button type="info" @click="userPassUpdate('formValidate2')">点击提交</Button>
                <!-- <Button type="warning" @click="userPassUpdateFormReset('formValidate2')" style="margin-left: 20px;width:80px">清空</Button> -->
                <Button type="success" @click="userPassUpdateCloseView('formValidate2')" style="margin-left: 20px;width:80px">关闭</Button>
              </FormItem>
            </Form>
          </Modal>
          <Modal v-model="updateAuthGroupModal" :width="700" draggable scrollable title="修改权限" @on-ok="updateAuthGroup">
            <div style="padding: 0px 40px 20px;  height:550px; overflow-y: scroll; color:#17233d;">
              <Form ref="formValidate3" :model="formValidate3" :label-width="50">
                <FormItem label="用户名" prop="username">
                  <Input disabled v-model="formValidate3.username"></Input>
                </FormItem>
                <FormItem label="角色" prop="role">
                  <Select v-model="formValidate3.role">
                    <Option value="adminstrator">管理员</Option>
                    <Option value="general">使用者</Option>
                  </Select>
                </FormItem>
                <FormItem label="部门" prop="department">
                  <Input v-model="formValidate3.department"></Input>
                </FormItem>
                <FormItem label="权限组" prop="auth_group">
                  <Select v-model="formValidate3.auth_group" multiple>
                    <Option v-for="item in auth_groups" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <template>
                  <Divider dashed>我的工单</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.work_order==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">我的工单：</span>
                    <span v-if="permisstions.child.work_order_audit==='1'" style="color:#19be6b; margin-left:20px">可审核</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可审核</span>
                    <span v-if="permisstions.child.work_order_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.work_order_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>文件管理</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.files==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">文件管理：</span>
                    <span v-if="permisstions.child.file_upload==='1'" style="color:#19be6b; margin-left:20px">可上传</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可上传</span>
                    <span v-if="permisstions.child.file_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>数据服务</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.database==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">数据服务：</span>
                    <span v-if="permisstions.child.redis_aliyun_view==='1'" style="color:#19be6b; margin-left:20px">云环境可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">云环境不可见</span>
                    <span v-if="permisstions.child.redis_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.redis_clear==='1'" style="color:#19be6b; margin-left:20px">可清理</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可清理</span>
                    <span v-if="permisstions.child.redis_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>发布服务</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.project==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">部署设置：</span>
                    <span v-if="permisstions.child.deploy_config==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <CheckboxGroup v-model="permisstions.child.deploy_env">环境权限：
                      <Checkbox v-for="(item, index) in all_envs" :key="index" :label=item disabled></Checkbox>
                    </CheckboxGroup>
                  </div>
                  <div>
                    <span style="font-size:14px">发布服务：</span>
                    <span v-if="permisstions.child.deploy_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.deploy_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.deploy_build==='1'" style="color:#19be6b; margin-left:20px">可构建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可构建</span>
                    <span v-if="permisstions.child.deploy_update==='1'" style="color:#19be6b; margin-left:20px">可修改</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可修改</span>
                    <span v-if="permisstions.child.deploy_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                    <span v-if="permisstions.child.deploy_history_view==='1'" style="color:#19be6b; margin-left:20px">可查看历史构建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可查看历史构建</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>镜像管理</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.image==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">镜像管理：</span>
                    <span v-if="permisstions.child.push_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.push_oprate==='1'" style="color:#19be6b; margin-left:20px">可推送</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可推送</span>
                    <span v-if="permisstions.child.push_record_view==='1'" style="color:#19be6b; margin-left:20px">可查看推送记录</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可查看推送记录</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>应用管理</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.application==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">应用环境：</span>
                    <span v-if="permisstions.child.env_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.env_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.env_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <div>
                    <span style="font-size:14px">容器器组管理：</span>
                    <span v-if="permisstions.child.containers_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.containers_restart==='1'" style="color:#19be6b; margin-left:20px">可重启</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可重启</span>
                    <span v-if="permisstions.child.containers_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <div>
                    <span style="font-size:14px">服务发现：</span>
                    <span v-if="permisstions.child.router_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.router_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.router_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                </template>
                <template>
                  <Divider dashed>线上管理</Divider>
                  <div>
                    <span style="font-size:14px">主权限：</span>
                    <span v-if="permisstions.parent.production==='1'" style="color:#19be6b; margin-left:34px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:34px">不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">集群权限：</span>
                    <span v-if="permisstions.child.production_stg_view==='1'" style="color:#19be6b; margin-left:20px">UAT环境可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">STG不可见</span>
                    <span v-if="permisstions.child.production_prod_view==='1'" style="color:#19be6b; margin-left:20px">Prod可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">Prod不可见</span>
                  </div>
                  <div>
                    <span style="font-size:14px">集群管理：</span>
                    <span v-if="permisstions.child.namespace_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.namespace_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.namespace_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <div>
                    <span style="font-size:14px">部署管理：</span>
                    <span v-if="permisstions.child.deployment_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.deployment_deploy==='1'" style="color:#19be6b; margin-left:20px">可发布</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可发布</span>
                    <span v-if="permisstions.child.deployment_backend==='1'" style="color:#19be6b; margin-left:20px">可回滚</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可回滚</span>
                    <span v-if="permisstions.child.deployment_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.deployment_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <div>
                    <span style="font-size:14px">Pod管理：</span>
                    <span v-if="permisstions.child.pods_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.pods_restart==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                  </div>
                  <div>
                    <span style="font-size:14px">服务管理：</span>
                    <span v-if="permisstions.child.service_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.service_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.service_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <div>
                    <span style="font-size:14px">路由管理：</span>
                    <span v-if="permisstions.child.ingress_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.ingress_create==='1'" style="color:#19be6b; margin-left:20px">可创建</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可创建</span>
                    <span v-if="permisstions.child.ingress_delete==='1'" style="color:#19be6b; margin-left:20px">可删除</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可删除</span>
                  </div>
                  <!-- <div>
                    <span style="font-size:14px">配置管理：</span>
                    <span v-if="permisstions.child.config_view==='1'" style="color:#19be6b; margin-left:20px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可见</span>
                    <span v-if="permisstions.child.config_refresh==='1'" style="color:#19be6b; margin-left:20px">可刷新配置</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可刷新配置</span>
                    <span v-if="permisstions.child.config_level==='1'" style="color:#19be6b; margin-left:20px">可更改日志级别</span>
                    <span v-else style="color:#ed4014; margin-left:20px">不可更改日志级别</span>
                  </div> -->
                </template>
                <template>
                  <Divider dashed>系统管理</Divider>
                  <div>
                    <span style="font-size:14px;">主权限：</span>
                    <span v-if="permisstions.parent.system==='1'" style="color:#19be6b; margin-left:10px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:10px">不可见</span>
                    <span style="font-size:14px;margin-left:30px">用户管理：</span>
                    <span v-if="permisstions.child.user_view==='1'" style="color:#19be6b; margin-left:10px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:10px">不可见</span>
                    <span style="font-size:14px;margin-left:30px">权限组：</span>
                    <span v-if="permisstions.child.user_group_view==='1'" style="color:#19be6b; margin-left:10px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:10px">不可见</span>
                    <span style="font-size:14px;margin-left:30px">系统设置：</span>
                    <span v-if="permisstions.child.sysconfig_view==='1'" style="color:#19be6b; margin-left:10px">可见</span>
                    <span v-else style="color:#ed4014; margin-left:10px">不可见</span>
                  </div>
                </template>
              </Form>
            </div>
          </Modal>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { userList, userAdd, userDelete, authGroupList } from '@/api/sysconfig'
import { userUpdatePass, authGroupUserAuth, authGroupUserAuthUpdate } from '@/api/sysconfig'
import { deployConfEnvsDetail } from '@/api/deploy'

  export default {
    data () {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please enter your password'));
        } else {
          if (this.formValidate.passwordAgen !== '') {
            // 对第二个密码框单独验证
            this.$refs.formValidate.validateField('passwordAgen');
          }
          callback();
        }
      };
      const validatePassAgen = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formValidate.password) {
          callback(new Error('两次输入的密码不匹配!'));
        } else {
          callback();
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please enter your password'));
        } else {
          if (this.formValidate2.passwordAgen !== '') {
            // 对第二个密码框单独验证
            this.$refs.formValidate2.validateField('passwordAgen');
          }
          callback();
        }
      };
      const validatePassAgen2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formValidate2.password) {
          callback(new Error('两次输入的密码不匹配!'));
        } else {
          callback();
        }
      };
      return {
        userPage: 1,
        userPageSize: 10,
        count: null,
        data: [],
        all_envs: [],
        auth_groups: [],
        permisstions: {
          parent: '',
          child: '',
        },
        updateUserPassModal: false,
        updateAuthGroupModal: false,
        user_columns_id: null,
        auth_group_id: null,
        formValidate: {
          username: '',
          password: '',
          passwordAgen: '',
          department: '',
          name: '',
          role: '',
          mobile: '',
          auth_group: []
        },
        formValidate2: {
          username: '',
          password: '',
          passwordAgen :'',
        },
        formValidate3: {
          username: '',
          role: '',
          department :'',
          auth_group: []
        },
        ruleValidate: {
          username: [
            { required: true, message: 'The username cannot be empty', trigger: 'blur' }
          ],
          name: [
            { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ],
          role: [
            { required: true, message: 'The role cannot be empty', trigger: 'change' }
          ],
          auth_group: [
            { required: true, type: 'array', message: 'The role cannot be empty', trigger: 'change' }
          ],
          password: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          passwordAgen: [
            { required: true, validator: validatePassAgen, trigger: 'blur' }
          ],
          department: [
            { required: true, message: 'The department cannot be empty', trigger: 'blur' }
          ],
          role: [
            { required: true, message: 'The role cannot be empty', trigger: 'blur' }
          ]
        },
        ruleValidate2: {
          password: [
            { required: true, validator: validatePass2, trigger: 'blur' }
          ],
          passwordAgen: [
            { required: true, validator: validatePassAgen2, trigger: 'blur' }
          ],
        },
        columns: [
          {
            title: '用户名',
            key: 'username'
          },
          {
            title: '角色',
            key: 'role'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '权限组',
            key: 'auth_group'
          },
          {
            title: '部门',
            key: 'department'
          },
          {
            title: '电话',
            key: 'mobile'
          },
          {
            title: '操作',
            slot: 'action',
            width: 260,
            align: 'center'
          }
        ],
      }
    },
    created () {
      this.data_list();
      this.authGroup();
      this.cluster_envs();
    },
    methods: {
      // 获取用户列表
      data_list () {
        var params = {
          'Page': this.userPage,
          'PageSize': this.userPageSize
        }
        userList(params).then(res => {
          this.count = res.data.count
          this.data = res.data.results
        }).catch(err => {
          this.$Message.error({content:'接口请求失败!',duration: 5,closable: true})
        });
      },
      // 获取权限组名称
      authGroup () {
        authGroupList().then(res => {
          var results = res.data.results;
          var auth_group_obj = [];
          for (const key in results) {
            var groups = {}
            groups['value'] = results[key].auth_group
            groups['label'] = results[key].auth_group
            auth_group_obj.push(groups)
          }
          this.auth_groups = auth_group_obj;
        })
      },
      cluster_envs () {
        // 获取所有环境
        deployConfEnvsDetail().then(res => {
          var envs_data = res.data.results
          for (var service_type in envs_data) {
            this.all_envs.push(envs_data[service_type].name)
            // this.all_envs.push({'value':envs_data[service_type].name,'label':envs_data[service_type].label})
          }
        })
      },
      userRegistry (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            // 请求后端接口创建数据
            userAdd(this.formValidate).then(res => {
              this.data_list()  //在创建新地址时再次请求数据
              this.$Message.success({content:'创建成功!',duration: 5,closable: true});
            }).catch( err => {
              this.$Message.error({content:'创建失败!',duration: 5,closable: true})
            })
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      UserSwitchPage (page) {
        this.userPage = page;
        this.data_list()
      },
      // 获取id
      updateUserPass_id (index) {
        this.updateUserPassModal = true
        this.formValidate2.username = this.data[index].username
        this.user_columns_id = this.data[index].id
      },
      // 更新用户密码
      userPassUpdate(name) {
        userUpdatePass(this.user_columns_id, this.formValidate2).then(res => {
          this.$Message.success("密码修改成功!")
        }).catch(err => {
          this.$Message.error("密码修改失败!")
        })
      },
      // 清空修改密码输入框
      userPassUpdateFormReset (name) {
        this.$refs[name].resetFields();
      },
      // 关于密码修改窗口
      userPassUpdateCloseView (name) {
        this.updateUserPassModal = false;
        this.userPassUpdateFormReset(name);
      },
      // 获取id
      updateAuthGroup_id (index) {
        this.updateAuthGroupModal = true;
        this.auth_group_id = this.data[index].id
        this.formValidate3.username = this.data[index].username;
        this.formValidate3.role = this.data[index].role;
        this.formValidate3.department = this.data[index].department;
        var auth_group = this.data[index].auth_group;
        this.formValidate3.auth_group = auth_group.split(',')
        authGroupUserAuth(this.formValidate3.auth_group).then(res => {
          this.permisstions = res.data
        })
      },
      // 修改权限
      updateAuthGroup () {
        authGroupUserAuthUpdate(this.auth_group_id, this.formValidate3).then(res => {
          this.data_list()
          this.$Message.success("权限修改成功!")
        }).catch(err => {
          this.$Message.error("权限修改失败!")
        })
      },
      // 删除用户
      remove (index) {
        userDelete(this.data[index].id).then(res => {
          this.data.splice(index, 1);
          this.userPage = 1;
          this.$Message.success({content:'删除成功!',duration: 5,closable: true})
        }).catch(err => {
          this.$Message.error({content:'删除失败!',duration: 5,closable: true})
        })
      },
    }
  }
</script>